<!DOCTYPE HTML>
<html>
<head>
    <include file="Public/head"/>
    <link href="__CSS__/center.css" type="text/css" rel="stylesheet">
</head>
<body>

<!-- 头部 -->
<include file="Public/header"/>
<!-- /头部 -->

<!-- 主体 -->
<block name="header">
    <div id="main-container" class="container user-config">
        <div class="row">
            <div class="col-xs-12 col-md-3" style="width: 220px">
                <div>
                    <div class="user-info-panel bg-primary text-center margin_bottom_10">
                        <div>
                            <img class="avatar-img" src="{$self.avatar128}">
                        </div>
                        <div>
                            <a class="nickname" href="{$self.space_url}">{$self.nickname}</a>
                        </div>

                    </div>
                </div>
                <div>
                    <nav class="menu" data-toggle="menu">
                        <a class="btn btn-success btn-lg" href="{$self.space_url}"><i class="icon-user"></i> 个人主页</a>
                        <ul class="nav nav-primary side-menu">
                            <li id="info" ><a href="{:U('index')}"><i class="icon-th"></i> 资料设置</a></li>
                            <li id="avatar"><a href="{:U('avatar')}"><i class="icon-user"></i> 头像修改</a></li>
                            <li id="password"><a href="{:U('password')}"><i class="icon-lock"></i> 密码修改</a></li>
                            <li id="other"><a href="{:U('other')}"><i class="icon-list-ul"></i> 其他</a></li>
                        </ul>
                    </nav>
                    <script>
                        $("#{$tab}").addClass('active');
                    </script>
                </div>
            </div>
            <div class="col-xs-12  col-md-9">
                <div id="usercenter-content-td">
                    <div class="container-fluid">
                        <block name="body"></block>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>



    </div>
</div>

    <script type="text/javascript">
        $(function () {
            $(window).resize(function () {
                $("#main-container").css("min-height", $(window).height() - 343);
            }).resize();
        })
    </script>
</block>
<!-- /主体 -->

<!-- 底部 -->
<include file="Public/footer"/>
<!-- /底部 -->

<script>
    $(function () {
        var $sidebar = $('#usercenter-sidebar-td');
        var $sidebar_xs = $('#usercenter-sidebar-xs');
        var $sidebar_sm = $('#usercenter-sidebar-sm');
        var $content = $('#usercenter-content-td');

        function trigger_resp() {
            var width = $(window).width();
            if (width < 768) {
                on_xs();
            } else {
                on_sm();
            }
        }

        function on_xs() {
            $sidebar_xs.append($sidebar);
            $content.css({'padding-left': 0, 'padding-right': 0});
        }

        function on_sm() {
            $sidebar_sm.prepend($sidebar);
        }

        trigger_resp();

        $(window).resize(function () {
            trigger_resp();
        })
    })
</script>

</body>
</html>
